<template>
	<div class="cartcontrol">
		<transition name="fade1">
	    <div class="decrease1" v-show="food.num" @click.stop="increaseCart" >
	    	<span class="c-inner" >-</span></div>
	    	</transition>
	    <div class="c-count" v-show="food.num">{{food.num}}</div>
	    <div class="increase" @click.stop="addCart">+</div>
	</div>
</template>

<script>
	export default{
		props:{
			food:{
				type:Object
			},
			index:{
				type:Number
			}
		},
		mounted:function(){
		},
		methods:{
			addCart:function(event){
				if(!event._constructed){
					return;
				}
				if(!this.food.num){
					this.$set(this.food,'num',1);
				}
				else{
					this.food.num++;
				}
				this.$emit('chan',this.index);
			},
			increaseCart:function(){
				if(!event._constructed){
					return;
				}
				this.food.num--;
			}
		}
	}
</script>

<style>
	.cartcontrol{
		
	}
	.decrease1{
		display: inline-block;
		transition: all 1s linear;
	}
	.c-inner{
		display: inline-block;
		opacity: 0.3;
		width: 20px;
		height: 20px;
		font-size: 20px;
		line-height: 20px;
		padding: 6px;
		background: black;
		border-radius:50% ;
		text-align: center;
		transition: all 1s linear;
	}
	.c-count{
		display: inline-block;
		padding: 6px;
	}
	.increase{
		opacity: 0.3;
		text-align: center;
		width: 20px;
		height: 20px;
		display: inline-block;
		padding: 6px;
		font-size: 20px;
		line-height: 20px;
		background: blue;
		border-radius:50% ;
	}
	
	.fade1-enter,.fade1-leave-to{
		transform: translateX(24px) scale(0.5);
	}
	.fade1-leave-to .c-inner{
		transform: rotateZ(90deg);
	}
	.fade1-enter .c-inner{
		transform: rotateZ(90deg);
	}
	.fade1-enter-active{
		transition: all 0.2s linear;
	}
	.fade1-leave-active{
		transition: all 0.2s linear;
	}
</style>